<template>
  <el-container>
    <el-header>
      <div
        style="
          font-family: '首屏文字';
          font-size: 25px;
          font-weight: 600;
          color: #409eff;
          margin-right: 10px;
        "
      >
        {{ currentDate }}
      </div>
      <div v-if="alarmcount > 0">
        <!-- <el-badge :value="alarmcount" :max="99" class="item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yujing"></use>
          </svg>
        </el-badge> -->
      </div>
      <div v-else>
        <div class="item">
          <!-- <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yujing-copy"></use>
          </svg> -->
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="fatter">
        <div class="fatter_top">
          <el-row :gutter="12" justify="start">
            <el-col :span="1.5">
              <div>
                <span>设备列表:</span>
                <el-select v-model="choiseDevice" placeholder="请选择设备">
                  <el-option
                    v-for="item in DeviceOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="1.5">
              <div>
                <el-date-picker
                  v-model="dataVAlueOne"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="1.5">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="1.5">
              <div>
                <el-button type="primary" @click="handleSystemConfiguration"
                  >添加摄像头</el-button
                >
              </div>
            </el-col>
            <!-- <el-col :span="1.5">
              <div>
                <el-button type="primary">拍照</el-button>
              </div>
            </el-col> -->
            <!-- <el-col :span="1.5">
              <div>
                <el-date-picker v-model="dataVAlueTwo" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="1.5">
              <div>
                <el-button type="primary">事件类型</el-button>
              </div>
            </el-col> -->
          </el-row>
        </div>
        <el-tabs type="border-card" style="width: 100%; height: 100%">
          <el-tab-pane label="曲线" style="width: 100%; height: 100%">
            <div
              class="fatter_left"
              style="width: 100%; height: 100%"
              v-loading="searchloadTable"
            >
              <div class="echartstyle">
                <div
                  ref="chart"
                  :style="{ width: '100%', height: HeightTable - 170 + 'px' }"
                  v-loading="loadEchart"
                ></div>
              </div>
              <div class="echartImage" style="width: 100%; height: 100%">
                <div
                  class="images"
                  :style="{ width: '100%', height: HeightTable - 100 + 'px' }"
                >
                  <el-row :gutter="20">
                    <el-col
                      :span="7"
                      v-for="(image, index) in jpgImages"
                      :key="index"
                      v-if="image.id !== -Infinity"
                    >
                      <!-- <el-image :src="'http://47.116.161.180/ydyz/uploads/' +
                        image.image_path
                        " alt="图片飞走了" fit="cover" style="width: 100%; height: 200px"
                        :preview-src-list="previewImages" /> -->
                      <el-image
                        :src="ttt + '/ydyz/uploads/' + image.image_path"
                        alt="图片飞走了"
                        fit="cover"
                        style="width: 100%; height: 200px"
                        :preview-src-list="previewImages"
                      />
                      <div class="image-info">
                        <p>设备名称: {{ image.camera_id }}</p>
                        <p>最高温度: {{ image.max_temperature }} °C</p>
                        <p>采集时间: {{ image.alert_time }}</p>
                        <p>
                          <el-button
                            size="small"
                            icon="el-icon-camera-solid"
                            type="primary"
                            style="width: 100%"
                            @click="handlePhotoGraph(image.camera_id)"
                            >拍照</el-button
                          >
                        </p>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <!-- <div class="fatter_left" v-else>
              <el-empty description="无数据"></el-empty>
            </div> -->
          </el-tab-pane>
          <el-tab-pane label="摄像头列表" style="width: 100%; height: 100%">
            <div class="fatter_right" style="width: 100%; height: 100%">
              <el-table
                v-loading="loadTable"
                :data="tableData"
                stripe
                border
                style="width: 100%"
                :height="HeightTable - 170"
              >
                <el-table-column
                  property="id"
                  label="序号"
                  width="100"
                  align="center"
                />
                <el-table-column
                  property="name"
                  label="设备名称"
                  width="200"
                  align="center"
                />
                <el-table-column
                  property="serial_port"
                  label="串口"
                  align="center"
                />
                <!-- <el-table-column property="rs485_address" label="RS485地址" align="center" />
                  <el-table-column property="register_address" label="寄存器地址" align="center" /> -->
                <el-table-column
                  property="max_temperature_alert"
                  label="最大温度(℃)"
                  align="center"
                />
                <el-table-column
                  property="average_temperature_alert"
                  label="平均温度(℃)"
                  align="center"
                />
                <el-table-column
                  property="created_at"
                  label="创建时间"
                  align="center"
                />
                <el-table-column align="center" label="操作" width="190">
                  <template #default="scope">
                    <el-button-group class="ml-4">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handlePhotoGraph(scope.row.id)"
                        >拍照</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handleOnButton('edit', scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        size="mini"
                        @click="handleOnButton('del', scope.row)"
                        >删除</el-button
                      >
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                style="margin-top: 10px; text-align: center"
                background
                layout=" prev, pager, next, total, jumper"
                :total="tableTotal"
                :default-page-size="pageSize"
                @current-change="onPageChange"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="setName"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form
        ref="CameraFrom"
        :model="CameraFrom"
        :rules="CameraRules"
        label-width="140px"
      >
        <el-form-item label="摄像头名称" prop="name">
          <el-input v-model="CameraFrom.name" placeholder="请输入摄像头名称" />
        </el-form-item>
        <el-form-item label="摄像头ID" prop="name">
          <el-input v-model="CameraFrom.id" placeholder="请输入摄像头ID" />
        </el-form-item>
        <!-- <el-form-item label="最大温度告警阈值" prop="alarmTemperatureMax">
          <el-input
            v-model="CameraFrom.alarmTemperatureMax"
            placeholder="请输入最大温度告警阈值"
          />
        </el-form-item>
        <el-form-item label="485地址" prop="address">
          <el-input v-model="CameraFrom.address" placeholder="请输入485地址" />
        </el-form-item>
        <el-form-item label="串口" prop="serial_port">
          <el-input v-model="CameraFrom.serial_port" placeholder="请输入串口" />
        </el-form-item>
        <el-form-item label="设备绑定" prop="device_id">
          <el-select
            v-model="CameraFrom.device_id"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in DeviceOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="寄存器地址" prop="register_address">
          <el-input
            v-model="CameraFrom.register_address"
            placeholder="请输入寄存器地址"
          />
        </el-form-item>
        <el-form-item label="波特率" prop="baud_rate">
          <el-input v-model="CameraFrom.baud_rate" placeholder="请输入波特率" />
        </el-form-item>
        <el-form-item label="平均温度告警阈值" prop="alarmTemperatureAverage">
          <el-input
            v-model="CameraFrom.alarmTemperatureAverage"
            placeholder="请输入平均温度告警阈值"
          />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
import {
  create_camera,
  query_camera,
  delete_camera,
  update_camera,
  create_action,
  handleScreening,
} from "@/api/dashod.js";
import { query_device } from "@/api/device";
export default {
  name: "Index",
  data() {
    return {
      ttt: window.location.protocol + "//" + window.location.host,
      currentDate: "",
      alarmcount: 9999,
      dataVAlueOne: [], // 当天的结束时间格式化为 yyyy-MM-dd], // 当天的结束时间],
      choiseDevice: "",
      dataVAlueTwo: "",
      chartInstance: null,
      previewImages: [],
      temperatureData: [
        // 示例数据
        { date: "2025-02-01", sensor1: 30, sensor2: 28 },
        { date: "2025-02-02", sensor1: 32, sensor2: 30 },
        { date: "2025-02-03", sensor1: 35, sensor2: 34 },
        { date: "2025-02-04", sensor1: 28, sensor2: 26 },
        { date: "2025-02-05", sensor1: 29, sensor2: 27 },
        { date: "2025-02-06", sensor1: 31, sensor2: 29 },
        { date: "2025-02-07", sensor1: 30, sensor2: 40 },
      ],
      HeightTable: window.innerHeight - 250,
      rowList: null,
      tableData: [],
      DeviceOptions: [],
      loadTable: false,
      loadEchart: false,
      open: false,
      title: "添加摄像头",
      CameraFrom: {
        id: "",
        address: "1",
        name: "",
        alarmTemperatureMax: "1",
        alarmTemperatureAverage: "1",
        serial_port: "1", //串口
        baud_rate: "1", //波特率
        register_address: "1", //寄存器地址
      },
      searchloadTable: false,
      CameraRules: {
        id: [{ required: true, message: "请输入摄像头ID", trigger: "blur" }],
        device_id: [
          { required: true, message: "请选择设备", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入485地址", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入摄像头名称", trigger: "blur" },
        ],
        numbering: [
          { required: true, message: "请输入摄像头编号", trigger: "blur" },
        ],
        alarmTemperatureMax: [
          {
            required: true,
            message: "请输入最大温度告警阈值",
            trigger: "blur",
          },
        ],
        alarmTemperatureAverage: [
          {
            required: true,
            message: "请输入平均温度告警阈值",
            trigger: "blur",
          },
        ],
        serial_port: [
          {
            required: true,
            message: "请输入串口",
            trigger: "blur",
          },
        ],
        register_address: [
          {
            required: true,
            message: "请输入寄存器地址",
            trigger: "blur",
          },
        ],
        baud_rate: [
          {
            required: true,
            message: "请输入波特率",
            trigger: "blur",
          },
        ],
      },
      currentPage4: 4,
      images: [
        // 示例数据
      ],
      currentIndex: 0,
      setName: "添加摄像头",
      tableTotal: 0,
      pageSize: 10,
      page: 1,
      //轮询变量
      pollingInterval: null,
      isPolling: false,
      jpgImages: [],
    };
  },
  methods: {
    //拍照
    handlePhotoGraph(camare_id) {
      this.$confirm(`需要给${camare_id}拍照吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            device_id: camare_id,
            code: "TP",
            name: "摄像头拍照",
          };
          create_action(data).then((res) => {
            if (res.status == "success") {
              this.$message({
                type: "success",
                message: res.message,
              });
            } else {
              this.$message({
                type: "error",
                message: "拍照失败!",
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取当前时间
    updateDate() {
      const now = new Date();
      // 格式化为 "YYYY年MM月DD日 HH:mm:ss" 的字符串
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份从0开始，所以加1
      const day = now.getDate();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentDate = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`; // 自定义格式
    },
    //轮询
    startPolling(t) {
      if (!this.isPolling) {
        this.isPolling = true;
        let tt = t ? t : this.choiseDevice;
        this.getList(tt); // 获取数据
        this.pollingInterval = setInterval(() => {
          // 这里可以放置你的接口调用逻辑
          this.updateReloadTime();
          // 调用接口的代码
          this.getList(tt); // 获取数据

          // window.location.reload();
        }, 50000); // 50秒
        console.log("轮询已启动50秒刷新一次");
      }
    },
    stopPolling() {
      if (this.isPolling) {
        clearInterval(this.pollingInterval);
        this.isPolling = false;
        console.log("轮询已停止");
      }
    },
    initChart(res) {
      if (this.$refs.chart) {
        this.chartInstance = echarts.init(this.$refs.chart);
        this.updateChart(res);
      }
    },
    updateChart(res) {
      let data = res;
      const colors = [
        "#FF5733",
        "#33FF57",
        "#3357FF",
        "#F1C40F",
        "#8E44AD",
        "#E67E22",
        "#2ECC71",
        "#3498DB",
        "#9B59B6",
        "#34495E",
        "#1ABC9C",
        "#D35400",
        "#C0392B",
        "#2980B9",
        "#8E44AD",
        "#F39C12",
        "#2C3E50",
        "#7F8C8D",
        "#BDC3C7",
        "#95A5A6",
      ];
      const groupedArray = Object.values(
        data.reduce((acc, item) => {
          if (!acc[item.camera_id]) {
            acc[item.camera_id] = []; // Create a new array for this camera_id
          }
          acc[item.camera_id].push(item); // Push the current item into the array
          return acc;
        }, {})
      );
      groupedArray.forEach((cameraGroup, index) => {
        if (cameraGroup.length > 0) {
          cameraGroup[0].color = colors[index % colors.length]; // Assign a color to the first object
        }
      });
      let ss = this.processDataForEcharts(groupedArray);
      this.$nextTick(() => {
        this.chartInstance.setOption(ss);
      });
    },
    //图表重构
    processDataForEcharts(data, sss) {
      // console.log("每秒刷新更新的值是:", data);
      // 收集所有时间点
      const allTimes = data.reduce((times, cameraData) => {
        cameraData.forEach((item) => times.add(item.alert_time));
        return times;
      }, new Set());

      // 转换为数组并排序
      const sortedTimes = Array.from(allTimes).sort();
      // 为每个摄像头创建单独的数据系列
      const series = data.map((cameraData, index) => {
        // 提取时间和温度数据
        // console.log(cameraData.reverse());
        const timeData = cameraData.reverse().map((item) => item.alert_time);
        const tempData = cameraData
          .reverse()
          .map((item) => parseFloat(item.max_temperature));
        // 创建时间-温度映射
        const timeMap = new Map(
          cameraData.map((item) => [
            item.alert_time,
            parseFloat(item.max_temperature),
          ])
        );
        // 确保每个时间点都有对应的数据，没有的用null
        const temperatures = sortedTimes.map(
          (time) => timeMap.get(time) || null
        );
        // 获取摄像头ID用于图例
        const cameraId = cameraData[0]?.camera_id || `Camera ${index + 1}`;
        return {
          name: cameraId,
          type: "line",
          data: temperatures,
          // 如果有color字段，使用它作为线条颜色
          connectNulls: true, // 连接空值点
          itemStyle: {
            color: cameraData[0]?.color,
          },
        };
      });

      // 配置 ECharts option
      const option = {
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          data: sortedTimes,
          axisLabel: {
            // rotate: 45 // 斜着显示时间标签以防重叠
          },
        },
        yAxis: {
          type: "value",
          name: "温度 (°C)",
        },
        series: series,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: series.map((s) => s.name),
        },
      };

      return option;
    },
    handleSystemConfiguration() {
      this.open = true;
      this.setName = "添加摄像头";
      this.CameraFrom.name = "";
      this.CameraFrom.id = "";
      // Object.keys(this.CameraFrom).forEach((key) => {
      //   this.CameraFrom[key] = "";
      // });
    },
    submitForm() {
      this.$refs.CameraFrom.validate((valid) => {
        if (valid) {
          if (this.setName === "添加摄像头") {
            let obj = {
              id: this.CameraFrom.id,
              name: this.CameraFrom.name,
              serial_port: this.CameraFrom.serial_port,
              rs485_address: this.CameraFrom.address,
              baud_rate: +this.CameraFrom.baud_rate,
              register_address: this.CameraFrom.register_address,
              max_temperature_alert: +this.CameraFrom.alarmTemperatureMax,
              average_temperature_alert:
                +this.CameraFrom.alarmTemperatureAverage,
              device_id: this.choiseDevice,
            };
            // this.handleVerify();
            create_camera(obj)
              .then((res) => {
                if (res.status == "success") {
                  this.$message.success(res.message);
                  this.open = false;
                  this.getTableList();
                } else {
                  this.$message.error(res.message);
                }
              })
              .catch((err) => {
                // console.log(err)
              });
          } else {
            let obj = {
              camera_id: this.rowList.id,
              id: this.CameraFrom.id,
              name: this.CameraFrom.name,
              serial_port: this.CameraFrom.serial_port,
              rs485_address: this.CameraFrom.address,
              baud_rate: +this.CameraFrom.baud_rate,
              register_address: this.CameraFrom.register_address,
              max_temperature_alert: this.CameraFrom.alarmTemperatureMax,
              average_temperature_alert:
                this.CameraFrom.alarmTemperatureAverage,
              device_id: this.choiseDevice,
            };
            update_camera(obj).then((res) => {
              if (res.status == "success") {
                this.$message.success(res.message);
                this.open = false;
                this.getTableList();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          this.$message.error("请填写完整信息");
          return false;
        }
      });
    },
    handleOnButton(name, row) {
      if (name === "edit") {
        // console.log(row)
        this.rowList = row;
        this.open = true;
        this.setName = "修改摄像头";
        Object.keys(this.CameraFrom).forEach((key) => {
          this.CameraFrom[key] = row[key];
        });
        this.CameraFrom.alarmTemperatureMax = +row.max_temperature_alert;
        this.CameraFrom.alarmTemperatureAverage =
          +row.average_temperature_alert;
        this.CameraFrom.address = row.rs485_address;
      } else {
        this.$confirm(`此操作将永久删除${row.name}, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // console.log(row);
          delete_camera(row.id).then((res) => {
            if (res.status == "success") {
              this.$message.success(res.message);
              this.getTableList();
            } else {
              this.$message.success(res.message);
            }
          });
        });
      }
    },
    /** 重置密码按钮操作 */
    handleVerify() {
      this.$prompt("请输入管理员密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
        inputValidator: (value) => {
          if (/<|>|"|'|\||\\/.test(value)) {
            return "不能包含非法字符：< > \" ' \\ |";
          }
        },
      })
        .then(({ value }) => {
          this.$modal.msgSuccess("配置完成!");
          // resetUserPwd(row.userId, value).then((response) => {
          //   this.$modal.msgSuccess("修改成功，新密码是：" + value);
          // });
        })
        .catch(() => {
          this.open = true;
        });
    },
    handleSearch() {
      this.searchloadTable = true;
      this.stopPolling();
      this.startPolling(); // 重新开始轮询
    },
    //时间刷新函数
    updateReloadTime() {
      const today = new Date();
      const startOfDay = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        today.getHours() - 16,
        today.getMinutes(),
        today.getSeconds(),
        0
      );
      const endOfDay = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        31,
        59,
        59,
        0
      );
      const formattedStartOfDay = startOfDay
        .toISOString()
        .replace("T", " ")
        .split(".")[0];
      const formattedEndOfDay = endOfDay
        .toISOString()
        .replace("T", " ")
        .split(".")[0];
      this.$set(this.dataVAlueOne, 0, formattedStartOfDay);
      this.$set(this.dataVAlueOne, 1, formattedEndOfDay);
    },
    getList(t) {
      // this.loadTable = true;
      let res = t ? t : this.choiseDevice;
      handleScreening(
        1,
        1000,
        res,
        this.dataVAlueOne[0],
        this.dataVAlueOne[1]
      ).then((response) => {
        if (response.status == "success") {
          let resulit = response.data;
          this.images = resulit;
          this.initChart(resulit);
          //处理照片函数
          this.handleWithPhotos(resulit);
          window.addEventListener("resize", this.chartInstance.resize); // 监听窗口大小变化
          // this.temperatureData = response.data;
        } else {
          this.$message.error("查询失败");
        }
        this.searchloadTable = false;
      });
    },
    handleWithPhotos(data) {
      const groupedArray = Object.values(
        data.reduce((acc, item) => {
          if (!acc[item.camera_id]) {
            acc[item.camera_id] = []; // Create a new array for this camera_id
          }
          acc[item.camera_id].push(item); // Push the current item into the array
          return acc;
        }, {})
      );
      this.jpgImages = groupedArray.flatMap(
        (innerArray) =>
          innerArray
            .filter((item) => item.image_path.endsWith(".jpg")) // Filter out items that don't end with .jpg
            .reduce((max, current) => (current.id > max.id ? current : max), {
              id: -Infinity,
            }) // Get the item with the highest id
      );
      this.previewImages = this.jpgImages.map(
        (image) => this.ttt + "/ydyz/uploads/" + image.image_path
      );
      // console.log("右侧照片容器数据", this.jpgImages);
      // this.previewImages = this.jpgImages.map(image => 'http://47.116.161.180/ydyz/uploads/' + image.image_path);
      // console.log(this.previewImages)
    },
    onPageChange(value) {
      this.page = value;
      this.getTableList();
    },
    //需要定时刷新？ 表格的暂时不需要定时刷新，因为增删改查会刷新
    getTableList() {
      this.loadTable = true;
      query_camera(this.page, this.pageSize).then((res) => {
        this.tableData = res.data;
        this.tableTotal = +res.pagination.total_cameras;
        this.loadTable = false;
      });
    },
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.stopPolling();
      this.updateDate();
      setInterval(this.updateDate, 1000); // 每秒更新
      this.updateReloadTime(); //更新时间
      query_device(1000, 1).then((res) => {
        // console.log(res);
        this.DeviceOptions = res.data;
        this.choiseDevice = res.data[0].id;
        this.startPolling(res.data[0].id);
        this.getTableList();
      });
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.chartInstance.resize); // 清理事件监听
  },
};
</script>

<style scoped lang="scss">
.el-container {
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #f5f7fa;
    padding: 0 20px;
    color: #333;

    .item {
      margin-right: 60px;
    }

    .icon {
      width: 1.4em;
      height: 1.4em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      cursor: pointer;
    }
  }

  .el-main {
    height: calc(100vh - 150px);
    overflow: hidden;

    // background-color: #c41d1d;
    .fatter {
      height: 100%;

      .fatter_top {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        min-height: 60px;
        line-height: 60px;
        background-color: #f5f7fa;
        padding: 0 20px;

        // color: #333;
      }
    }
  }
}

.fatter_left {
  padding: 0 20px;
  color: #333;
  display: flex;
  justify-content: space-around;
  overflow-y: auto;

  .echartstyle {
    flex: 1;
    // overflow-y: auto;
    box-sizing: border-box;
  }

  // border-right: 1px solid #ccc;
  .echartImage {
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0px 40px;
    flex: 1;
    height: 100%;

    .images {
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
